<script setup>
import buttoncoment from '../button/button1.vue'
import { ref, onMounted, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import qs from 'qs'
import { ElMessageBox } from 'element-plus'
import axios from 'axios';
import jwt_decode from "jwt-decode";

let token = jwt_decode(localStorage.getItem("token"))
if (token == null) {
    token = jwt_decode(localStorage.getItem("longToken"))
}

const router = useRouter();

const userId = ref(token.userId)

const input = ref('')

const header = ref('钱包转账')

var moneyPatten = /^[1-9]\d{0,8}$/

const money = ref('') //输入的充值金额

const isMoneyTrue = ref(true)

function determine() {
  isMoneyTrue.value = moneyPatten.test(money.value)
}


const userNumber = token.userNumber //用户账号

function open(errormsg) {
  ElMessageBox.alert(errormsg, '验证失败!', {
    confirmButtonText: '确认',
  })
}
function transfer() {
  if (money.value == "") {
    open("请输入金额")
  } else {
    if (isMoneyTrue.value) {
        sessionStorage.setItem('userNumber', userNumber.value),//用户账号
        sessionStorage.setItem('transferAmount', money.value),//输入金额
        sessionStorage.setItem('targetUserNumbers', input.value),//输入的银行卡账号
        sessionStorage.setItem('header', header.value)//当下的表头
        sessionStorage.setItem('userId',userId.value)
      //弹出一个输入密码组件
      router.push('/payment-password')
    } else {
      money.value == ""
    }
  }
}


</script>

<template >
  <div class="container">
  <div class="box">
    <p class="reminder">输入或扫码设置对方账号</p>

    <div class="mt-4" style="margin-left: 10px;margin-top: 10px;">
      <el-input v-model="input" placeholder="对方钱包账号" clearable class="input-style" maxlength="12">
        <template #append>
          <i class="iconfont icon-v2_qdjvzk right-1" style="font-size: 45px;"></i>
        </template>
      </el-input>
      <div>
        <el-input v-model="money" @blur="determine()" placeholder="输入转账金额" clearable class="money-style" maxlength="9">
        </el-input>
        <p class="p1" v-if="!isMoneyTrue">转账输入框只能输入数字且不为空</p>
      </div>
    </div>

    <buttoncoment btn-name="立即转账" btn-color="#337ecc" @click="transfer" />
  </div>
</div>
</template>

<style scoped>
.container{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
}
.box{
  padding-top: 10px;
  width: 100%;
  background-color: #fff;overflow: auto;
}
.input-style{
  width: 98%;
  height: 50px;
  font-size: 16px;
}
.money-style{
  width: 98%;
  height: 50px;
  margin-top: 12px;
  font-size: 16px;
}
.reminder {
  width: 100%;
  text-align: center;
  font-weight: 600;
  font-size: 16px;
}

.right-1 {
  color: rgb(24, 41, 133);
  font-size: larger;
  margin-top: 0px !important;
}

.p1 {
  width: 260px;
  margin: 0 auto;
  color: red;
  font-size: 14px;
  text-align: left;
  text-indent: 10px;
  margin-top: 10px;
}
</style>